<template>
  <view
    class="nav-title-wrap"
    :style="{
      height: navigationBarAndStatusBarHeight,
      marginBottom: navigationBarAndStatusBarHeight,
    }"
  >
    <!--空白来占位状态栏-->
    <view :style="{ height: statusBarHeight }"></view>
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="left" @tap="back">
        <image src="../../static/images/back.png"></image>
      </view>
      <!-- <view class="center">ap聊天室</view> -->
      <!-- <view class="right">在线{{ memberNum }}人</view> -->
      <view class="avatar-list">
        <view class="avatar-item" v-for="(item, index) in avatarData" :key="index" @tap="handleModify">
          <image :src="`../../static/images/${item}.png`" class="avatar-img"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    memberNum: {
      type: Number,
      default: 0,
    },
    avatarData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      // 状态栏 + 导航栏高度
      navigationBarAndStatusBarHeight:
        uni.getStorageSync("statusBarHeight") +
        uni.getStorageSync("navigationBarHeight") +
        "px",
      // 状态栏
      statusBarHeight: uni.getStorageSync("statusBarHeight") + "px",
    };
  },
  methods: {
    handleModify() {
      this.$emit('handleModify')
    },
    back() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
};
</script>

<style lang="less">
.nav-title-wrap {
  .nav-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20rpx;
  }

  .left {
    width: 20rpx;
    height: 34rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .center {
    position: absolute;
    left: 40%;
    font-size: 32rpx;
  }

  .right {
    position: absolute;
    right: 20rpx;
    color: rgba(54, 92, 255, 1);
    letter-spacing: -0.29px;
    font-size: 24rpx;
  }

  .avatar-list {
    display: flex;
    align-items: center;
    max-width: 85%;
    margin-left: 78rpx;
    overflow: auto;
  }

  .avatar-item {
    margin-left: 10rpx;
  }

  .avatar-img {
    width: 64rpx;
    height: 64rpx;
    border-radius: 18rpx;
  }
}
</style>